<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>响应式导航条</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>

<body>
<!--header start-->
<header class="nav navbar-default navbar-mystyle navbar-fixed-top">
  <div class="navbar-header">
  <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button>
    <i class="fa fa-bars slide li-border"></i>
    <a class="logo"> 
      管理系统
    </a>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav pull-right">
      <li class="li-border">
        <a href="#" class="mystyle-color">
          <span class="fa fa-bell-o"></span>
          <span class="topbar-num">0</span>
        </a>
      </li>
      <li class="li-border dropdown">
        <a href="#" class="mystyle-color" data-toggle="dropdown">
          <span class="fa fa-search"></span> 搜索
        </a>
        <div class="dropdown-menu search-dropdown">
          <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default">搜索</button>
            </span>
          </div>
         </div>
      </li>
      <li class="dropdown li-border">
        <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">帮助与文档<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">帮助与文档</a></li>
          <li class="divider"></li>
          <li><a href="#">论坛</a></li>
          <li class="divider"></li>
          <li><a href="#">博客</a></li>
        </ul>
      </li>
      <li class="dropdown li-border">
      	<a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">
     	      <span class="glyphicon glyphicon-user"></span> User<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">个人信息</a></li>
          <li class="divider"></li>
          <li><a href="#">修改密码</a></li>
          <li class="divider"></li>
          <li><a href="#">切换账号</a></li>
          <li class="divider"></li>
          <li><a href="#">退出系统</a></li>
        </ul>
      </li>
    </ul>
  </div>
</header>
<!-- header end -->
<!-- aside start -->
<aside>
    <div class="aside">
      <div class="aside-menu" id="sidebar">
        <div class="submenu">
          <a href="#">
            <i class="fa fa-dashboard">
              <b class="bg-danger"></b>
            </i>
            <span>组件<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body" id="menu1">
          <a href="buttons.html"><i class="fa fa-angle-right"></i><span>按钮</span></a>
          <a href="slider.html"><i class="fa fa-angle-right"></i><span>轮播</span></a>
        </div>
        <div class="submenu">
          <a href="#">
            <i class="fa fa-user">
              <b class="bg-warning"></b>
            </i>
            <span>个人信息<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
        <div class="submenu">
          <a>
            <i class="fa fa-laptop">
              <b class="bg-primarydark"></b>
            </i>
            <span>我的设备<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
        <div class="submenu">
          <a>
            <i class="fa fa-plus">
              <b class="bg-primary"></b>
            </i>
            <span>添加设备<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
        <div class="submenu">
          <a href="#">
            <i class="fa fa-gears">
              <b class="bg-success"></b>
            </i>
            <span>操作日志<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
        <div class="submenu">
          <a href="#">
            <i class="fa fa-shield">
              <b class="bg-info"></b>
            </i>
            <span>安全设置<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
      </div>
    </div>
</aside>
<!-- aside end -->
<!-- content start -->
<div class="content">
  <div class="vbox">
    <ul class="breadcrumb b-b b-light pull-in">
      <li>
        <a href="index.html"><i class="fa fa-home"></i>Home</a>
      </li>
      <li class="active">Workset</li>
    </ul>
    <div class="scrollable padder">
      <div class="row">
        <div class="col-md-6">
          <h4>预定义按钮</h4>
          <div class="btnGroup"> 
            <button href="#" class="btn btn-s-md btn-default">默认Default</button> 
            <button href="#" class="btn btn-s-md btn-primary">首选项Primary</button> 
            <button href="#" class="btn btn-s-md btn-success">成功Success</button> 
            <button href="#" class="btn btn-s-md btn-info">一般信息Info</button> 
            <button href="#" class="btn btn-s-md btn-warning">警告Warning</button> 
            <button href="#" class="btn btn-s-md btn-danger">危险Danger</button> 
            <button href="#" class="btn btn-s-md btn-dark">深色Dark</button> 
            <button href="#" class="btn btn-s-md btn-default disabled">不可用Disabled</button>
          </div>
          <h4>按钮尺寸</h4>
          <div class="btnGroup">
            <p> 
              <button href="#" class="btn btn-primary btn-lg btn-s-md">大按钮</button>
              <button href="#" class="btn btn-default btn-lg btn-s-md">大按钮</button> 
            </p>
            <p> 
              <button href="#" class="btn btn-info btn-s-md">默认按钮</button> 
              <button href="#" class="btn btn-default btn-s-md">默认按钮</button> 
            </p>
            <p> 
              <button href="#" class="btn btn-warning btn-sm btn-s-md">小按钮</button> 
              <button href="#" class="btn btn-default btn-sm btn-s-md">小按钮</button> 
            </p>
            <p> 
              <button href="#" class="btn btn-danger btn-xs btn-s-md">超小按钮</button>
              <button href="#" class="btn btn-default btn-xs btn-s-md">超小按钮</button> 
            </p>
          </div>
          <h4>下拉按钮</h4>
          <div class="btnGroup">
            <div class="btn-group">
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">班级 <span class="caret-down"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">一班</a></li>
                <li><a href="#">二班</a></li>
                <li class="divider"></li>
                <li><a href="#">三班</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">班级 <span class="caret-down"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">一班</a></li>
                <li><a href="#">二班</a></li>
                <li class="divider"></li>
                <li><a href="#">三班</a></li>
              </ul>
            </div>
            <p class="text-muted">带有分割线下拉按钮 </p>
            <div class="btn-group">
              <button class="btn btn-default">班级</button>
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">一班</a></li>
                <li><a href="#">二班</a></li>
                <li class="divider"></li>
                <li><a href="#">三班</a></li>
              </ul>
            </div>
            <div class="btn-group dropup">
              <button class="btn btn-default">班级</button>
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">一班</a></li>
                <li><a href="#">二班</a></li>
                <li class="divider"></li>
                <li><a href="#">三班</a></li>
              </ul>
            </div>
          </div>
          <h4>带有图标的按钮</h4>
          <p> 
            <button href="#" class="btn btn-default">
              <i class="fa fa-html5"></i> Html5
            </button> 
            <button href="#" class="btn btn-info">
              <i class="fa fa-css3"></i> CSS3
            </button> 
          </p>
          <p> 
            <button href="#" class="btn btn-default btn-lg btn-block">
              <i class="fa fa-bars pull-right"></i> Block button with icon
            </button> 
          </p>
          <p> 
            <button href="#" class="btn btn-default btn-block">
              <i class="fa fa-bars pull-left"></i> Block button with icon
            </button> 
          </p>
          <p> 
            <button href="#" class="btn btn-sm btn-icon btn-info">
              <i class="fa fa-twitter"></i>
            </button> 
            <button href="#" class="btn btn-sm btn-icon btn-success">
              <i class="fa fa-facebook"></i>
            </button> 
            <button href="#" class="btn btn-sm btn-icon btn-danger">
              <i class="fa fa-google-plus"></i>
            </button> 
          </p>
          <h4> 圆形带图标按钮 </h4>
          <p> 
            <button href="#" class="btn btn-rounded btn-sm btn-icon btn-default">
              <i class="fa fa-twitter"></i>
            </button> 
            <button href="#" class="btn btn-rounded btn-sm btn-icon btn-default">
              <i class="fa fa-facebook"></i>
            </button> 
            <button href="#" class="btn btn-rounded btn-sm btn-icon btn-default">
              <i class="fa fa-google-plus"></i>
            </button> 
          </p>
        </div>
        <div class="col-md-6">
          <h4>椭圆按钮</h4>
          <div class="btnGroup"> 
            <button href="#" class="btn btn-s-md btn-default btn-rounded">默认Default</button> 
            <button href="#" class="btn btn-s-md btn-primary btn-rounded">首选项Primary</button> 
            <button href="#" class="btn btn-s-md btn-success btn-rounded">成功Success</button> 
            <button href="#" class="btn btn-s-md btn-info btn-rounded">一般信息Info</button> 
            <button href="#" class="btn btn-s-md btn-warning btn-rounded">警告Warning</button> 
            <button href="#" class="btn btn-s-md btn-danger btn-rounded">危险Danger</button> 
            <button href="#" class="btn btn-s-md btn-dark btn-rounded">深色Dark</button> 
            <button href="#" class="btn btn-s-md btn-default disabled btn-rounded">不可用Disabled</button>
          </div>
          <h4>按钮组</h4>
          <div class="btn-group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
          </div>
          <p class="text-muted">垂直按钮组</p>
          <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">Top</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Bottom</button>
          </div>
          <p class="text-muted">嵌套按钮组</p>
          <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-success">2</button>
            <button type="button" class="btn btn-default">3</button>
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret-down"></span> </button>
              <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
              </ul>
            </div>
          </div>
          <p class="text-muted">调整按钮组</p>
          <div class="btn-group btn-group-justified"> 
          <a href="#" class="btn btn-primary">Left</a> <a href="#" class="btn btn-info">Middle</a> <a href="#" class="btn btn-success">Right</a> </div>
          <p class="text-muted">复杂按钮组</p>
          <div class="btn-toolbar">
            <div class="btn-group">
              <button type="button" class="btn btn-default">1</button>
              <button type="button" class="btn btn-default active">2</button>
              <button type="button" class="btn btn-default">3</button>
              <button type="button" class="btn btn-default">4</button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-default">5</button>
              <button type="button" class="btn btn-default">6</button>
              <button type="button" class="btn btn-default">7</button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-default">8</button>
            </div>
          </div>
          <h4 class="m-t-lg">按钮零件</h4>
          <p>
            <button class="btn btn-sm btn-default more_less"> 
              <span class="more" style="display: block;"><i class="fa fa-plus text"></i> More</span>
              <span class="less" style="display: none;"><i class="fa fa-minus text-active" ></i> Less</span> 
            </button>
          </p>
          <p>
            <button class="btn btn-default upload_success"> 
              <span class="upload" style="display: block;"><i class="fa fa-cloud-upload"></i> Upload</span> 
              <span class="success" style="display: none;"><i class="fa fa-check"></i> Success</span> 
            </button>
            <button class="btn btn-default heart"> 
              <i class="fa fa-heart-o heart_o" style="display: block;"></i> 
              <i class="fa fa-heart text-danger heart_danger" style="display: none;"></i> 
            </button>
            <button class="btn btn-default finger"> 
              <span class="finger_up" style="display: block;"> <i class="fa fa-thumbs-up text-success"></i> 25 </span> 
              <span class="finger_down" style="display: none;"> <i class="fa fa-thumbs-down text-danger"></i> 10 </span> 
            </button>
            <button class="btn btn-success save"><span id="span1">Save</span></button>
            <i class="fa fa-spin fa-spinner saving" style="display: none;"></i> 
          </p>
          <div class="m-b-sm">
            <div class="btn-group sex" data-toggle="buttons">
              <label class="btn btn-sm btn-info active">
                <input type="radio" name="options">
                <i class="fa text-active"></i> Male </label>
              <label class="btn btn-sm btn-success">
                <input type="radio" name="options">
                <i class="fa text-active"></i> Female </label>
              <label class="btn btn-sm btn-primary">
                <input type="radio" name="options">
                <i class="fa text-active"></i> N/A </label>
            </div>
          </div>
          <h4 class="m-t-lg"> Social buttons </h4>
          <p id="social-buttons"> 
            <a href="#" class="btn btn-rounded btn-sm btn-twitter"><i class="fa fa-fw fa-twitter"></i> Twitter</a> 
            <a href="#" class="btn btn-rounded btn-sm btn-facebook"><i class="fa fa-fw fa-facebook"></i> Facebook</a> 
            <a href="#" class="btn btn-rounded btn-sm btn-gplus"><i class="fa fa-fw fa-google-plus"></i> Google+</a> </p>
        </div>
      </div>
    </div>
  </div>
  
</div>
<!-- content end -->
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>

</body>
</html>